<template>
  <div class="navTop" >
    <div v-if="type=='bg'" v-for="(item,ind) in data" :key="ind"  @click="handleSelect(ind,item)" :class="['analysisTab',{'is-active':ind==activeIndex}]">
      <p>
        {{item.label?item.label:item.name}}
      </p>
    </div>
    <div v-if="type=='border'" v-for="(item,ind) in data" :key="ind"  @click="handleSelect(ind,item)" :class="['borderTab',{'isActive':ind==activeIndex}]">
      <p>
        {{item.label?item.label:item.name}}
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        data:this.analysis,
      }
    },
    props:{
        type:String,
        analysis:[Object,Array],
        name:String,
        activeIndex: {
            type: String,
            default: '0'
        }
    },
    methods:{
      handleSelect(ind,item){
        this.activeIndex = ind
        this.$emit('otherSelect',ind,item)
      }
    }
  }
</script>
<style scoped lang="scss">
  .navTop{
    display: flex;
    margin-top: 14px;
    .borderTab{
      padding: 3px 0;
      /*background: #F2F4F5;*/
      /*border-radius: 4px;*/
      /*opacity: 0.9;*/
      cursor: pointer;
      margin-right: 16px;
      white-space: nowrap;
      >p{
        font-weight: 400;
        color: #7B838A;
        line-height: 22px;
        font-size: 14px;
      }

    }
    .borderTab.isActive{
       border-bottom: 2px solid #1c7df0;
       p{
         color: #1c7df0;
         font-weight: bold;
       }
     }
    .analysisTab{
      padding: 3px 16px;
      background: #F2F4F5;
      border-radius: 4px;
      opacity: 0.9;
      margin-right: 16px;
      cursor: pointer;
      >p{
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        color: #7B838A;
        line-height: 22px;
        font-size: 14px;
      }
    }
    .analysisTab.is-active{
      background: #1c7df0;
      p{
        color: #fff;
      }
    }

  }
</style>
